<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ZingChart Demo</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
		<h2 id="wait">Loading lib....</h2>

		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
		<style>
			zing-grid[loading] {
				height: 400px;
			}
		</style>

		<div id='myChart'></div>

		<script>
			// https://www.zingchart.com/docs/tutorials/features/performance

			// defined ABOVE the render and sets flags
			// globally for ALL charts on a page
			zingchart.DEV.CACHECANVASTEXT = true;
			zingchart.DEV.CHECKDECIMALS = false;
			zingchart.DEV.CACHESELECTION = true;
			zingchart.DEV.MEDIARULES = false;
			zingchart.DEV.SKIPTRACKERS = true;
			// skips the intro loading screen (most likely invisible to human eye anyway)
			zingchart.DEV.SKIPPROGRESS = true;
			// indicates to the lib that there are no external resources to load (images)
			zingchart.DEV.RESOURCES = false;
			// prevents lib from storing the original data package
			zingchart.DEV.KEEPSOURCE = false;
			// prevents lib from creating a copy of the data package instead of working with the provided one (which can be altered)
			zingchart.DEV.COPYDATA = false;
			// forces the library to accept only long tokes (e.g., %node-value instead of %v) saving some parsing time
			zingchart.DEV.SORTTOKENS = false;
			// skips calculations of several plot relates statistics (min, max, sum, avg values)
			zingchart.DEV.PLOTSTATS = false;
			// tells library dashed syntax only is used so there is no conversion (saves time for large JSON's)
			zingchart.SYNTAX = 'dashed';

			function round2(val) {
				return Math.round(val * 100) / 100;
			}

			function round3(val) {
				return Math.round(val * 1000) / 1000;
			}

			function prepData(packed) {
				console.time('prep');

				// epoch,idl,recv,send,read,writ,used,free

				const numFields = packed[0];
				packed = packed.slice(numFields + 1);

				var cpu = Array(packed.length/numFields);
				var ram = Array(packed.length/numFields);
				var tcp = Array(packed.length/numFields);

				for (let i = 0, j = 0; i < packed.length; i += numFields, j++) {
					let date = packed[i] * 60 * 1000;
					cpu[j] = [date, round3(100 - packed[i+1])];
					ram[j] = [date, round2(100 * packed[i+5] / (packed[i+5] + packed[i+6]))];
					tcp[j] = [date, packed[i+3]];
				}

				console.timeEnd('prep');

				return [cpu, ram, tcp];
			}

			function makeChart(data) {
				console.time('chart');

				ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];

				var myConfig = {
					graphset: [
						{
							type: "line",
							flat: true,
							plot: {
								mode: "fast",
							},
							'crosshair-x': {},
							'scale-x': {
								zooming: true,
								transform: {
									type: 'date',
									all: '%m/%d/%y<br>%h:%i %A'
								}
							},
							series: [
								{
									values: data[0],
								},
								{
									values: data[1],
								},
								{
									values: data[2],
								}
							]
						}
					]
				};

				zingchart.render({
					id: 'myChart',
					data: myConfig,
					output: 'svg', // 'canvas'
					width: 1920,
					height: 600,
				});

				wait.textContent = "Done!";
				console.timeEnd('chart');
			}

			let wait = document.getElementById("wait");
			wait.textContent = "Fetching data.json (2.07MB)....";
			fetch("data.json").then(r => r.json()).then(packed => {
				wait.textContent = "Rendering...";
				let data = prepData(packed);
				setTimeout(() => makeChart(data), 0);
			});
		</script>
	</body>
</html>